import React, { Component } from 'react'
import { Icon, Modal, Row, Col, Radio, Upload } from 'antd';
import { connect } from 'dva';

import styles from '@/styled/form.less';
import { MyButton } from '@/styled/form';

@connect(({ upload }) => ({
  file: upload.fileValue || {},
}))
class UploadFile extends Component<any, any> {

  state = {
    fileList: [],
    confirmLoading: false,
    value: 1
  };

  onCancel = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'upload/init' }).then(() => {
      this.setState({ confirmLoading: false, fileList: [] })
    })
    dispatch({ type: 'devices/handleShow', payload: false })
  }


  handleUpload = () => {
    const { fileList, value } = this.state;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('files[]', file);
    });

    this.setState({ confirmLoading: true })

    const { dispatch } = this.props;
    dispatch({ type: 'upload/uploadFile', payload: fileList[0] }).then(() => {
      const { file } = this.props;

      file.message && dispatch({ type: 'devices/importFile', payload: { url: file.url, type: value } })
    }).then(() => {
      this.setState({
        confirmLoading: false,
        fileList: [],
        visible: false
      })
    })
  };

  onChange = e => {
    this.setState({
      value: e.target.value,
    });
  };

  render() {

    const { fileList, confirmLoading } = this.state;

    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    const { temple } = this.props;

    return (
      <>
        <Modal
          width={800}
          bodyStyle={{ height: '360px' }}
          destroyOnClose={true}
          title="导入"
          okText="保存"
          cancelText="取消"
          onOk={this.handleUpload}
          visible={this.props.show}
          confirmLoading={confirmLoading}
          onCancel={this.onCancel}
        >
          <Row>
            <Col span={3} offset={2}>
              <p className={styles.lableRequire} style={{ textAlign: 'center', lineHeight: '35px' }}>导入方式</p>
            </Col>
            <Col span={19} style={{ marginTop: '5px', position: 'relative' }}>
              <Radio.Group onChange={this.onChange} value={this.state.value}>
                <Radio value={1}>新增导入</Radio>
                <Radio value={2}>覆盖导入</Radio>
              </Radio.Group>
              {
                +this.state.value === 2 &&
              <p style={{position: 'absolute', right:'64px', top: '2px', color: '#ed7109' }}>
                <Icon type="info-circle" style={{ color: '#ed7109', fontSize: '17px', fontWeight: 900 }} />
                 {' '}覆盖导入会清空当前已导入的设备,请谨慎选择!
              </p>
              }
            </Col>
          </Row>
          <Row>
            <Col span={3} offset={2}>
              <p className={styles.lableRequire} style={{ textAlign: 'center', lineHeight: '35px' }}>选择文件</p>
            </Col>
            <Col span={19}>
              <Upload
                {...props}
                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              >
                <MyButton icon="select" style={{ marginRight: '5px' }}>导入</MyButton>
              </Upload>
            </Col>
          </Row>
          <Row>
            <Col
              span={16} offset={5}
              style={{ color: 'rgba(0, 0, 0, 0.75)', background: 'rgba(240,240,240,1)', borderRadius: '4px', padding: '15px 40px' }}
            >
              <p><Icon type="info-circle" style={{ color: '#ED7109', position: 'absolute', left: '14px', top: '18px', fontSize: '18px', fontWeight: 900 }} />
                如果你没有文件模板，请点击下载：
              </p>
              <p>
                {
                  temple && temple.contentLink
                    ? <a href={`${temple.contentLink}`}><Icon type="download" style={{ fontSize: '18px', fontWeight: 900 }} />&nbsp;&nbsp;{temple.name || ''}信息导入模板</a>
                    : <span>暂无模板</span>
                }
              </p>
              <p>使用excel批量导入模板时，请确认输入的内容为文本格式，若内容填写错误，请删除相应单位格后重新添加。</p>
            </Col>
          </Row>
        </Modal>
      </>
    )
  }
}

export default UploadFile;